<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
              <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
              <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <div class="info_box">
            <div class="left">
                <div class="grzl">个人中心</div>
                <ul class="nav_child">
                  <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                  <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                  <li><router-link :to="{path: '/Address'}">收件地址</router-link></li>
                  <li><router-link :to="{path: '/Invoice'}">发票信息</router-link></li>
                  <li><router-link :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                  <li><router-link :to="{path: '/DrawList'}">提现记录</router-link></li>
                  <li><router-link class="on" :to="{ path: '/Logs' }">消费记录</router-link></li>
                  <li><router-link :to="{ path: '/Editpass' }">修改密码</router-link></li>
                </ul>
            </div>
            <div class="iinforignt" style="padding-top: 40px">
                <el-table
                    :data="records"
                    :border="true"
                    stripe
                    style="width: 90%">
                    <el-table-column
                    label="日期"
                    align="center">
                      <template slot-scope="scope">
                      <span>{{formatDate(scope.row.paytime)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                    label="摘要"
                    align="center">
                      <template slot-scope="scope">
                      <span>升级{{levelName[scope.row.level]}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                    align="center"
                    label="金额">
                      <template slot-scope="scope">
                      <span>￥{{(scope.row.amount / 100).toFixed(2)}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center">
                      <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.state==1">未开票</el-tag>
                        <el-tag size="small" type="success" v-if="scope.row.state==3">已开票</el-tag>
                      </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clear"></div>
        </div>
      </center>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { Toast } from 'vant'
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
export default {
  name: 'Logs',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      page: 1,
      pageSize: 20,
      pageCount: 0,
      recordCount: 0,
      records:[]
    }
  },
  created () {
    var token = localStorage.getItem('token');
    if(!token) {
      this.$router.replace('/Login');
      return;
    }
    this.setTitle('消费记录');
    this.getRecord();
  },
  methods: {
    setPage(n){
      this.page = n;
    },
    getRecord(){
      Ajax.get('member/payrecord', {
        page: this.page,
        size: this.pageSize
      }).then(res=>{
        if(res.code == 0) {
          this.records = res.data.data;
          this.recordCount = res.data.recordCount;
          this.pageCount = res.data.pageCount;
        } else if(res.code == 403) {
          this.$router.replace('/Login');
        } else {
          Toast(res.msg);
        }
      }).catch(err=>{
        console.error(err);
      })
    }
  }
}
</script>
<style scope>
.color_ly{
  color:#f50;
}
</style>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
